<script>
import { Toast } from 'vant';
import UPopup from '@/components/u-popup.vue';
import UConfirm from '@/components/u-confirm.vue';

export default {
  name: 'withdraw',
  components: { UConfirm, UPopup },
  data() {
    return {
      value: '',
      menuListActive: 'all',
      menuShow: false,
      showWithdraw: false,
      emptyImage: require('./image/empty.png'),
      list:[
        {
          name: '18685559911(黔东南张震)',
          status: '待审核',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已拒绝',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },
        {
          name: '18685559911(黔东南张震)',
          status: '待审核',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已提现',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

        {
          name: '18685559911(黔东南张震)',
          status: '已提现',
          date: '2024年1月28日 02:23:02',
          amount: '105.46'
        },

      ],
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast('取消');
    }
  }
};
</script>

<template>
  <frame-view class="index">
    <van-search
      v-model="value"
      show-action
      left-icon="none"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <div style="display: flex;justify-content: right;align-items: center;position: relative">
          <span style="font-size: 28px;color: #222222;">搜索</span>
        </div>
      </template>
    </van-search>

    <van-empty
      style="margin-top: 50px"
      :image="emptyImage"
      v-if="list.length === 0"
      description="搜索无结果" />
    <div style="padding: 32px 24px 24px;font-size: 24px;background-color: #Fff;border-radius: 24px;margin-top: 16px" v-for="item in list" v-else>
      <div style="display: flex;justify-content: space-between">
        <p style="font-size: 28px;color: #222222;">{{ item.name }}</p>
        <p :style="{color: item.status==='已提现'?'#BBBBBB':'#FF1212'}">{{ item.status }}</p>
      </div>
      <div style="display: flex;justify-content: space-between;margin-top: 18px;align-items: end">
        <p style="color: #999999;">{{ item.date }}</p>
        <p style="font-size: 40px;font-weight: bold">105.46</p>
      </div>
      <van-divider style="margin-top: 24px" />
      <div style="display: flex;height: 60px;justify-content: space-between">
        <div style="color: var(--primary-color);height: 60px;line-height: 60px" @click="showWithdraw = true">查看提现信息</div>
        <div v-if="item.status === '待审核'">
          <van-button plain round type="danger" style="width: 152px;height: 60px;">拒绝</van-button>
          <van-button round type="info" style="width: 152px;margin-left: 16px;height: 60px;">通过</van-button>
        </div>
      </div>
    </div>

  </frame-view>
</template>

<style scoped lang="scss">
.menu {
  position: absolute;
  right: 10px;
  top: 60px;
  width: 167px;
  height: auto;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 27px;
  z-index: 1; /* 确保 .menu 的 z-index 设置为 1 或者更低 */
  //阴影
  //box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  //扩散大些
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); //参数分别为：水平偏移，垂直偏移，模糊半径，阴影颜色

  //伪类 三角符在右上角
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    right: 18px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    z-index: 9999; /* 确保伪元素的 z-index 高于 .menu */
  }

  .menu-item {
    height: 86px;
    line-height: 86px;
    font-size: 28px;
    color: #222222;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.3s;

    &:hover {
      color: var(--primary-color);
      font-weight: bold;
    }

    &.active {
      color: var(--primary-color);
      font-weight: bold;
    }
  }
}

</style>
